<template>
	<view>
		<head-navbar :back="true">
			<view >
				<text>子账号列表</text>
			</view>
			<view slot="right" class="rightBar">
			<view class="rightTip" @click="openHeaderMenu" data-type="0" style="display: flex;align-items: center;">
				<view style="color: #000000;">{{name}}</view>
				<image class="img" src="../../static/img/down.png"></image>
				<view class="paoBox" v-show="box">
					<view class="paopao"></view>
					<view class="list" @click="toshuaxin(item.groupBookId,item.grade)"  v-for="(item,index) in groupList">{{item.grade}}</view>
				</view>
			</view>
			<view>
				<text style="color: #000000;" @click="toPage(0,'/pages/group/newUser')">创建</text>
			</view>
			</view>
		</head-navbar>	
		<view class="content">
			<view class="list">
				<view class="item itemTop">
					<view class="user">子账号</view>
					<view class="coupon">幸运豆</view>
					<view class="reper">所需幸运豆</view>
					<view class="btns">操作</view>
				</view>
				<view class="item" v-for="(item,index) in list">
					<view class="user">{{item.accountNo}}</view>
					<view class="coupon">{{item.getCount}}</view>
					<view class="reper reper2">{{item.count}}</view>
					<view class="btns" v-if="item.getCount == item.count"><view class="btn2"  @click="toPage(0,'/pages/group/game?childUserId='+item.childUserId + '&groupBookId='+ item.groupBookId)">兑换</view></view>
					<view class="btns" v-else><view class="btn">抽奖</view></view>
				</view>
			</view>
			<u-loadmore color='#949494' :status="status" bg-color="rgba(255,255,255,0)" margin-top='20' margin-bottom='15'
			 @loadmore='laodmore' :loadText="loadText" />
		</view>
	</view>
</template>

<script>
	import * as api from '../../api/group/index'
	export default{
		data() {
			return {
				box:false,
				groupList:[],
			    list:[],
				groupBookId:'',
				name:"",
				status: 'loading',
				loadText: {
					loadmore: '获取数据错误,点击重新加载',
					loading: '努力加载中',
					nomore: '没有更多了哦'
				},
			}
		},
		onShow() {
			this.status = 'loading'
			this.list = []
			this.getList()
			
		},
		methods:{
			toshuaxin(groupBookId,grade){
				this.groupBookId = groupBookId
				this.name = grade
				this.status = 'loading'
				this.list = []
				this.getAccountDrawCount()
			},
			laodmore(){
				this.status = 'loading'
				this.list = []
				this.getAccountDrawCount()
			},
			async getAccountDrawCount(){
				api.getAccountDrawCount({request:{groupBookId:this.groupBookId}}).then(res=>{
					this.status = 'nomore'
					this.list = res.data.dataBody
				}).catch(err=>{
					this.status = 'loadmore'
				})
			},
			getList(){
				api.getList().then(res=>{
					this.groupList = res.data.dataBody
					this.groupBookId = res.data.dataBody[0].groupBookId
					this.name = res.data.dataBody[0].grade
					this.getAccountDrawCount()
				}).catch(err=>{
				})
			},
			openHeaderMenu(){
				this.box = !this.box
			},
		}
	}
</script>

<style lang="scss" scoped>
	.rightBar{
		display: flex;
		align-items: center;font-size: 25rpx;
	}
	.rightTip{
		margin-right: 30rpx;
		position: relative;
		.img{
				width: 25rpx;
				height: 25rpx;
				margin-left: 10rpx;
			}
		.paoBox{
			border-radius: 4rpx;
			box-shadow: 0rpx 0rpx 10rpx #DCDFE6;
			.paopao{
				position: absolute;
				top: -10rpx;
				right: 0rpx;
				 width: 0;
				    height: 0;
				    border-left: 20rpx solid transparent;
				    border-right: 20rpx solid transparent;
				    border-bottom: 20rpx solid #FFFFFF;
					z-index: 100;
			}
			padding: 0 20rpx;
			position: absolute;
			top: 140%;
			right: -5rpx;
			background: #FFFFFF;
			z-index: 100;
			.list{
				text-align: center;
				border-bottom: 1rpx solid #f4f4f4;
				padding: 20rpx 0;
				width: 150rpx;
				font-size: 24rpx;
				color: #000000;
			}
		
		}
	}
	.content{
		margin-top: 20rpx;
		.list{
			padding: 0 20rpx;
			.item{
				font-size: 26rpx;
				background: #FFFFFF;
				margin-top: 10rpx;
				padding: 20rpx;
				display: flex;
				align-items: center;
				color: #000000;
				text-align: center;
				.user{
					flex: 2.6;
				}
				.reper{
					flex: 1.3;
				}
				.coupon ,.btns{
					flex: 1;
				}
				.reper2{
					color: #FF5C02;
				}
				.btn{
					margin: 0 auto;
					width: 80%;
					font-size: 24rpx;
					padding: 15rpx;
					background: #f4f4f4;
					border-radius: 10rpx;
				}
				.btn2{
					color: #FFFFFF;
					background: linear-gradient(270deg, #ff2020, #ff5a02);
					margin: 0 auto;
					width: 80%;
					font-size: 24rpx;
					padding: 15rpx;
					border-radius: 10rpx;
				}
			}
		}
		.itemTop{
			font-size: 26rpx!important;
			font-weight: 600!important;
			margin-top: 0;
		}
	}
</style>
